<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>影城首页</title>
  <link href="//cdn.staticfile.org/layui/2.9.7/css/layui.css" rel="stylesheet">
  <script src="//cdn.staticfile.org/layui/2.9.7/layui.js"></script>
  <script>
    layui.use(['element', 'rate'], function() {
      var element = layui.element;
      var rate = layui.rate;

      // 可以在这里初始化其他组件
    });
  </script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #ececf6;
    }
    header {
      background-color: #ffdf7e; /* 蓝色 */
      color: #171a1d;
      padding: 20px 0;
      text-align: center;
    }
    nav {
      background-color: #7abaff;
      color: #fff;
      padding: 10px;
      text-align: center;
    }
    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    nav ul li {
      display: inline;
      margin-right: 10px;
    }
    section {
      padding: 20px;
      text-align: center;
    }
    footer {
      background-color: #818182;
      color: #fff;
      text-align: center;
      padding: 10px 0;
      position: fixed;
      bottom: 0;
      width: 100%;
    }
    .movie-poster {
      width: 200px;
      height: auto;
      margin-bottom: 20px;
    }
    .login-button {
      position: absolute;
      top: 70px;
      right: 20px;
      background-color: #cfe2ff;
      color: #23292e;
      padding: 10px 20px;
      border-radius: 5px;
      border: none;
      cursor: pointer;
    }
  </style>
  <style>
    .custom-height1 {
      height: 1000px;
      /* 设定整体区块栅格高度 */
      background-color: #f0f0f0;
      /* 设置背景色，便于区分 */
      border: 1px solid #ccc;
      /* 添加边框，便于观察 */
    }

    .custom-height2 {
      height: 250px;
      /* 设定左边电影区块栅格高度 */
    }
  </style>

  <style>

    .custom-height3 {
      height: 150px;
      /* 设定搜索栏高度 */
    }
  </style>

  <style>
    .movie-name {
      color: blue;
      font-weight: bold;
    }

    /* 设定显示的电影名称格式 */

    .movie-rating .layui-icon {
      color: gold;
    }
  </style>
  <style>
    .responsive-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 图片填充方式，保持比例不变且填充整个容器 */
    }
  </style>
  <style>
    .movie1 {}
  </style>

  <header>
    <h1>Welcome to 丽江新中数影城</h1>
  </header>
</head>

<body>
<header>
  <h1>首页</h1>

</header>
<nav>
  <ul>
      <li><a href="http://47.120.11.236:8086/yingcheng">
      影城介绍
      </a></li>
      <li><a href="http://47.120.11.236:8086/flist">
        影片管理
      </a></li>
      <li><a href="http://127.0.0.1:8086/clist">
        影片咨询
      </a></li>
      <li><a  th:href="@{/ulist}">
        影厅管理
      </a></li>
      <li><a href="http://47.120.11.236:8086/plist">
          会员管理
      </a></li>
      <li><a href="http://47.120.11.236:8086/vlist">
          会员专区
      </a ></li>
      <li><a href="http://47.120.11.236:8086/Movie_Schedule">
        影片档期
        </a ></li>
      <li><a href="http://47.120.11.236:8086/cinema">
        影厅管理
      </a></li>
      <li><a href="http://47.120.11.236:8086/olist">
        在线购票
        </a></li>

        <div class="container">
        <!-- 其他内容 -->

        <li></li><button class="login-button">登录
          <a href="http://47.120.11.236:8086/loginss">

          </a>
        </button>
      </div>


  </ul>
</nav>

<!-- 以下是我设计的电影档期查询界面  -->
<div class="layui-row">
  <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 custom-height3">
    <div class="search-container">
      <!-- 搜索表单 -->
      <form class="layui-form" id="search-form">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">电影名称：</label>
            <div class="layui-input-inline">
              <input type="text" name="movieName" placeholder="请输入电影名称" autocomplete="off"
                     class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">电影类型：</label>
            <div class="layui-input-inline">
              <select name="movieType" lay-filter="movieType">
                <option value="">请选择类型</option>
                <option value="戏剧">戏剧</option>
                <option value="科幻">科幻</option>
                <option value="动画">动画</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <button type="submit" class="layui-btn layui-btn-normal">搜索</button>
          </div>
        </div>
      </form>

      <!-- 搜索结果显示区域 -->
      <div id="search-results">
        <!-- 查询结果将在这里显示 -->
      </div>
    </div>
  </div>

</div>
<div class="layui-col-md8 custom-height1">
  <div class="layui-row layui-col-space5">
    <div class="layui-col-md4 custom-height2 movie1">
      <div class="layui-row">
        <a href="https://example.com/movie-link" target="_blank" class="layui-col-md12">
          <div class="layui-col-md7 custom-height2" style="padding: 10px;">
            <img src="../../../img/New_movie_poster/p88.webp" class="responsive-img">
          </div>
          <div class="layui-col-md5 custom-height2" style="padding: 10px;">
            <div class="layui-row">
              <div class="layui-col-md12 movie-name">你想活出怎样的人生</div>
            </div>
            <div class="layui-row">
              <div class="layui-col-md12">动画 / 奇幻 / 冒险</div>
            </div>
            <div class="layui-row movie-rating">
              <div class="layui-col-md12">
                <i class="layui-icon layui-icon-star-fill"></i>
                <i class="layui-icon layui-icon-star-fill"></i>
                <i class="layui-icon layui-icon-star-fill"></i>
                <i class="layui-icon layui-icon-star-half"></i>
                <i class="layui-icon layui-icon-star"></i>
                (7.5/10)
              </div>
              <div class="layui-col-md12" style="padding: 10px;">￥45</div>
              <div class="layui-btn-container" style="padding: 10px;">

                <a href="http://47.120.11.236:8086/toAddOrder" target="_blank" class="layui-btn layui-btn-normal">购票</a>
              </div>
                <button type="button" class="layui-btn">详情</button>
              </div>
            </div>
        </div>
        </a>
      </div>
    </div>
    <div class="layui-col-md4 custom-height2">
      <div class="layui-row">
        <a href="https://example.com/movie-link" target="_blank" class="layui-col-md12">
          <div class="layui-col-md7 custom-height2" style="padding: 10px;">
            <img src="../../../img/New_movie_poster/p55.webp" class="responsive-img">
          </div>
          <div class="layui-col-md5 custom-height2" style="padding: 10px;">
            <div class="layui-row">
              <div class="layui-col-md12 movie-name">沙丘</div>
            </div>
            <div class="layui-row">
              <div class="layui-col-md12">剧情 / 科幻 / 冒险</div>
            </div>
            <div class="layui-row movie-rating">
              <div class="layui-col-md12">
                <i class="layui-icon layui-icon-star-fill"></i>
                <i class="layui-icon layui-icon-star-fill"></i>
                <i class="layui-icon layui-icon-star-fill"></i>
                <i class="layui-icon layui-icon-star-half"></i>
                <i class="layui-icon layui-icon-star"></i>
                (7.5/10)
              </div>
              <div class="layui-col-md12" style="padding: 10px;">￥55</div>
              <div class="layui-btn-container" style="padding: 10px;">
                <a href="http://47.120.11.236:8086/toAddOrder" target="_blank" class="layui-btn layui-btn-normal">购票</a>
              </div>
              <a href="https://47.120.11.236:8086/shaqiu" target="_blank" class="layui-btn">详情</a>
            </div>

          </div>
       </div>
        </a>
      </div>
    </div>
    <div class="layui-col-md4 custom-height2">
      <div class="layui-row">
        <a href="https://example.com/movie-link" target="_blank" class="layui-col-md12">
          <div class="layui-col-md7 custom-height2" style="padding: 10px;">
            <img src="../../../img/New_movie_poster/p66.webp" class="responsive-img">
          </div>
          <div class="layui-col-md5 custom-height2" style="padding: 10px;">
            <div class="layui-row">
              <div class="layui-col-md12 movie-name">功夫熊猫4</div>
            </div>
            <div class="layui-row">
              <div class="layui-col-md12">喜剧 / 动作 / 动画 / 奇幻 / 冒险</div>
            </div>
            <div class="layui-row movie-rating">
              <div class="layui-col-md12">
                <i class="layui-icon layui-icon-star-fill"></i>
                <i class="layui-icon layui-icon-star-fill"></i>
                <i class="layui-icon layui-icon-star-fill"></i>
                <i class="layui-icon layui-icon-star-half"></i>
                <i class="layui-icon layui-icon-star"></i>
                (7.5/10)
              </div>
              <div class="layui-col-md12" style="padding: 10px;">￥65</div>
              <div class="layui-btn-container" style="padding: 10px;">
                  <a href="http://47.120.11.236:8086/toAddOrder" target="_blank" class="layui-btn layui-btn-normal">购票</a>
                <button type="button" class="layui-btn">详情</button>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
<div class="layui-col-md4 custom-height1">热门推荐
  <div class="layui-row">
    <div class="layui-carousel" id="ID-carousel-demo-1">
      <div carousel-item>
        <div><img src="../../../img/New_movie_poster/p88.webp" class="responsive-img"></div>
        <div><img src="../../../img/New_movie_poster/p55.webp" class="responsive-img"></div>
        <div><img src="../../../img/New_movie_poster/p66.webp" class="responsive-img"></div>
        <div><img src="../../../img/New_movie_poster/p11.webp" class="responsive-img"></div>
        <div><img src="../../../img/New_movie_poster/p44.webp" class="responsive-img"></div>
      </div>
    </div>
    <hr class="ws-space-16">
    <script>
      layui.use(function() {
        var carousel = layui.carousel;
        // 渲染 - 设置时间间隔、动画类型、宽高度等属性
        carousel.render({
          elem: '#ID-carousel-demo-1',
          interval: 3000,
          anim: 'fade',
          width: '350px',
          height: '400px'
        });
      });
    </script>
  </div>
</div>
</div>

<script>
  // 初始化layui表单
  layui.use('form', function() {
    var form = layui.form;

    // 监听电影类型选择框变化
    form.on('select(movieType)', function(data) {
      // 如果电影名称为空，则根据选择框的内容进行搜索
      var movieName = $('input[name="movieName"]').val();
      if (movieName === '') {
        $('#search-form').submit();
      }
    });
  });

  // 监听表单提交事件
  $('#search-form').submit(function(event) {
    // 阻止表单默认提交行为
    event.preventDefault();

    // 获取搜索条件
    var formData = $(this).serializeArray();

    // 发送搜索请求
    $.ajax({
      url: 'your_backend_search_endpoint', // 替换为你的后端接口地址
      type: 'GET', // 或者 'POST'，取决于你的后端接口要求
      data: formData,
      success: function(response) {
        // 清空搜索结果区域
        $('#search-results').empty();

        // 处理后端返回的数据并更新页面内容
        response.forEach(function(movie) {
          // 创建电影区块并插入到页面中
          var movieBlock = $('<div class="movie">' +
                  '<h3>' + movie.name + '</h3>' +
                  '<p>类型：' + movie.type + '</p>' +
                  '<p>上映日期：' + movie.releaseDate + '</p>' +
                  '</div>');
          $('#search-results').append(movieBlock);
        });
      },
      error: function(xhr, status, error) {
        // 处理请求错误
        console.error('请求错误:', status, error);
      }
    });
  });
</script>

</body>

</html>